import React, { Component } from 'react';
import ExpenseList from './expense-list';
import ExpenseWarn from './expense-warn';
import ExpenseAmount from './expense-amount';
import ExpenseTable from './expense-table';
import ExpenseField from './expense-field';
import TemplateHoc from '../component/template-hoc';
import ExpenseApprovalHistory from './expense-apporval-history';

@TemplateHoc
class ExpenseBody extends Component {
  static contextTypes = {
    currentExpense: React.PropTypes.object,
    expenseReportInvoices: React.PropTypes.array
  };

  render() {
    const { currentExpense, expenseReportInvoices } = this.context;
    const { randomHash, auditTab, approvedKeys } = this.props;

    return (
      <section className="expense-main-containers">
        {
          expenseReportInvoices.length > 1 &&
          <section className="expense-main-menu">
            <ExpenseList
              approvedKeys={approvedKeys}
              randomHash={randomHash}
              auditTab={auditTab}
              changTab={this.props.changTab}
              getDesignationExpense={this.props.getDesignationExpense}
            />
          </section>
        }
        <section className="expense-main-content">
          <ExpenseWarn randomHash={randomHash} isShow={currentExpense.invoiceLabels && currentExpense.invoiceLabels[0]}/>
          <ExpenseAmount randomHash={randomHash}/>
          <ExpenseField randomHash={randomHash}/>
          <ExpenseTable randomHash={randomHash}/>
          <ExpenseApprovalHistory  randomHash={randomHash}/>
        </section>
      </section>
    );
  }
}

ExpenseBody.propTypes = {};

export default ExpenseBody;
